<!DOCTYPE html>
<!-- idioma español-->
<html lang="es">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<title>Notas</title>
</head>
<body>
	<h1>Notas</h1>
	<p class="lead">Hola vamos a ver que hacemos</p>
		<div id="ama"> <div>
	<!-- botón para lanzar el modal -->
	<a href="#modalPhoto" role="button" class="btn btn-primary" data-toggle="modal">Ver fotos</a>

	<!-- modal para ver las fotos -->
	<div id="modalPhoto" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalPhotoLabel" aria-hidden="true">

		<div class="modal-header">
		   	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<!-- Menú de opciones -->
		    <ul id="menuPhoto" class="nav nav-pills">
		        <li class="active">
		            <a href="#" id="edit_photo"> <i class="icon-pencil"></i> Editar</a>
		        </li>
		        <li class="active">
		        	<i class="icon-trash"></i> Eliminar
		             <!-- a href="#modalBorrarBox" role="button" class="" data-toggle="modal" title="${message( code: 'default.button.delete.label', default: 'Delete')}"> <i class="icon-trash"></i> ${message( code: 'default.button.delete.label', default: 'Delete')} </a> -->
		        </li>
		    </ul>
		</div>

		<div class="modal-body">
			<!-- Carusel para pasar las fotos -->
			<div id="carouselPhoto" class="carousel slide">
				  <!-- Carousel items -->
				<div class="carousel-inner">
				  	<div class="active item">
				  		<img src="fotos/paisaje1.jpg"/>
				  		<div class="carousel-caption">
							<p>Paisaje 1</p>
						</div>
				    </div>
				    <div class="item">
				  		<img src="fotos/paisaje2.jpg"/>
				  		<div class="carousel-caption">
							<p>Paisaje 2</p>
						</div>		    	
				    </div>
				    <div class="item">
				  		<img src="fotos/paisaje3.jpg"/>
				  		<div class="carousel-caption">
							<p>Paisaje 3</p>
						</div>		    	
				    </div>
				    <div class="item">
				  		<img src="fotos/paisaje4.jpg"/>
				  		<div class="carousel-caption">
							<p>Paisaje 4</p>
						</div>		    	
				    </div>		    
				</div>
				<!-- Carousel nav -->
				<a class="carousel-control left" href="#carouselPhoto" data-slide="prev">&lsaquo;</a>
				<a class="carousel-control right" href="#carouselPhoto" data-slide="next">&rsaquo;</a>
			</div>
		</div>

		<div class="modal-footer">
		    <button class="btn" data-dismiss="modal" aria-hidden="true"> Cerrar </button>
		</div>
	</div>

	<!-- modal de editar descripción de la foto -->
		<!-- Modal para editar la descripcion -->
	<div id="modalPhotoDescriptionEdit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalPhotoDescriptionEditLabel" aria-hidden="true">

		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="modalPhotoDescriptionEditLabel">Editar descripción</h3>
		</div>

		<form class="form-horizontal" enctype="multipart/form-data">
		<!--g:form action="editBoxPicture" params="[idWish: wishInstance.id]" class="form-horizontal" enctype="multipart/form-data" -->
		<div class="modal-body">
			<fieldset class="form">
				<div class="control-group">
					<label for="description" class="control-label">Descripción</label>
					<div class="controls">
						<input type="text" name="description" id="newDescription"/>
					</div>
				</div>
			</fieldset>
		</div>


		<div class="modal-footer">
			<div class="form-actions">
  				<button type="submit" class="btn btn-primary" action="update" id="buttonAceptEditDescriptionPhoto"> Aceptar</button>
  				<button type="reset" class="btn" data-dismiss="modal">Cancel</button>
			</div>
			<!--div class="form-actions" 
		    	<button class="btn btn-primary" id="buttonAceptEditDescriptionPhoto"> Aceptar</button>
           		<button class="btn" type="reset" data-dismiss="modal">Cancel</button>
           	</div-->
		</div>

		</form>
	</div>
	
	<script src="jQuery/jquery-1.9.1.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript">

		$(document).ready(function() {

		var currentPhotoDescription;

	    $("#edit_photo").click(function(){
	    	$("#carouselPhoto").carousel('pause');
 			/* para obtener la descripcion de la foto actual*/
        	currentPhotoDescription = $(".carousel-inner").find(".active").children(".carousel-caption").find("p").text();
        	$("body").prepend(currentPhotoDescription + "<p>");
            $("#newDescription").attr('value', currentPhotoDescription.toString());

            $("#modalPhoto").modal('hide');
            $("#modalPhotoDescriptionEdit").modal('show');
        });

	    $("#buttonAceptEditDescriptionPhoto").click(function(){
	   	 	var newText = $("#newDescription");
	   		
        	$("body").prepend("<p> 1" + newText + "</p>");
        	$("body").prepend("<p> 2" + newText + "</p>");
        	$("body").prepend("<p> 3" + newText.attr("value") + "</p>");
        	$("body").prepend("<p> 4" + newText.text() + "</p>");
        	$("body").prepend("<p> 5" + newText.html() + "</p>");

	   		currentPhotoDescription = $(".carousel-inner").find(".active").children(".carousel-caption").children("p").html(newText);
          
            $("#modalPhotoDescriptionEdit").modal('hide');
	    	$("#modalPhoto").modal('show');
	    });

	    // function updateDescription(newDescription){
	    // 	$("body").prepend(newDescription);
	   	// 	$("body").prepend($("#newDescription").attr('value'));

	    // };
	});
	</script>



	<div class="control-group">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>Required documentation</th>
			          	<th>Tracking number</th>
			          	<th>Date received</th>
			          	<th> </th>
	                	</tr>
	            	</thead>
			<tbody>
				<tr>
		                  	<td> 
				               	<label class="checkbox">
							<input type="checkbox" id="chk1" onclick="clickDocPhase1()"> Tipo de docuemtno1
						</label>
					</td>
		                  	<td>
		                  		<input type="text" name="bill" id="txt1" disabled="true"/>
		                  	</td>
		                  	<td>	
		                  		<p><a role="button" id="btnA1" class="btn btn-small btn-primary" disabled="true"> ${message(code: 'wish.loadFile.label', default: 'Add file')}</a></p>
		                  		<p><a role="button" id="btnE1" class="btn btn-small btn-primary" disabled="true"> ${message(code: 'wish.deleteDocument.label', default: 'Delete document')}</a></p>
		                  	 </td>
				</tr>
	             </tbody>
		</table>

		<div id="ol"> </div>
	</div>
	<script>
    	 
    		function clickDocPhase1() {
    			if ($("#chk1").prop("checked") == true)
            		{ 
        			$("#txt1").prop("disabled", false);
        			$("#date1").prop("disabled", false);
        			$("#btnA1").removeAttr("disabled"); 
        			$("#btnE1").removeAttr("disabled");                      
                	} 
                	else
                   	{ 
        			$("#txt1").prop("disabled", true);
        			$("#date1").prop("disabled", true);
        			$("#btnA1").attr("disabled", "disabled");
        			$("#btnE1").attr("disabled", "disabled");

                    	}

			var hi = $("#btnA1").attr("disabled"); 
			$("#ol").text("acá " + hi);
        	}
    	</script>	

</body>
</html>
